import { Fragment } from "react";
import { recipes } from "./data";

function Recipe({ id, name, ingredients }) {
  return (
    <div>
      <h2>{name}</h2>
      <ul>
        {/* item.ingredients 做循环 */}

        {ingredients.map((aaa, index) => (
          <li key={index}>{aaa}</li>
        ))}
      </ul>
    </div>
  );
}

function RecipeList() {
  return (
    <div>
      <h1>菜谱</h1>

      {recipes.map((item) => (
        // <Recipe
        //   key={item.id}
        //   id={item.id}
        //   name={item.name}
        //   ingredients={item.ingredients}
        // />

        <Recipe key={item.id} {...item} />
      ))}
    </div>
  );
}

const poem = {
  lines: [
    "I write, erase, rewrite",
    "Erase again, and then",
    "A poppy blooms.",
  ],
};

export default function Poem() {
  let output = [];

  poem.lines.forEach((line, index) => {
    output.push(<hr key={index + "--hr"} />);

    output.push(<p key={index + "--p"}>{line}</p>);
  });

  // 移除第一个 hr
  output.shift();

  console.log("output", output);

  /**
   * 需要一个包裹元素，且不渲染真实的节点：
   *    1. 使用 Fragment
   *    2. 使用 空标签 <></>
   */
  return (
    <article>
      {output}
      {/* {poem.lines.map((line, index) => (
        <>
          <p key={index}>{line}</p>
          {index === poem.lines.length - 1 ? null : <hr />}
        </>
      ))} */}
    </article>
  );
}
